<!--- 人员结算详情 -->
<script>
import Schema from "async-validator";
import HPCommonPage from "@/components/HPCommonPage";
import HPTable from "@/components/HPTable";
import HPDialog from "@/components/HPDialog";
import { fetchData } from "@/fetch/api";
import {
  fetchDetailList,
  fetchDetail,
  fetchSaveDetail,
  fetchFeeCalculation,
} from "@/fetch/modules/rollup";
import { toThousands } from "@/utils/numberFormat";
import {
  userRollupHeaderItems,
  userRollupDetailApprovalItem,
} from "../js/column";
import { settleStatus, settleDetailStatus } from "../js/status";
import { remind } from '@/fetch/api'

export default {
  created() {
    const { deptName, supplierName, settleNo, monthly, people } =
      this.$store.state.info || {};
    // * 部门信息由列表通过vuex 持久化带入
    if (deptName) {
      this.departInfo.deptNameSeq = deptName;
      this.departInfo.supplierName = supplierName;
      this.departInfo.monthly = monthly;
      this.departInfo.people = people;
    }
    if (settleNo) {
      this.selectData.settleNo = settleNo;
      this.fetchUserTableData();
    }
    this.fetchApprovalData();
  },
  methods: {
    // 提醒
    onRemind(row) {
      remind({
        originId: row.orderId,
        remindCode: 'remind_05'
      }).then(res => {
        const { state, message } = res.data
        if(state === '0000') {
          this.$message({
            message: message,
            type: 'success',
            duration: 1500,
          });
          this.fetchUserTableData()
        }
      })
    },
    // * 获取审批状态数据字典数据
    async fetchApprovalData() {
      const { data } = await fetchData("bilibili_flow_state");
      if (data.state === "0000") {
        this.approvalStatus = data.data.reduce((prev, item) => {
          // * 排除掉撤回、废弃状态展示
          // if (!["flow_state_04", "flow_state_06"].includes(item.coded)) {
          //   prev[item.coded] = {
          //     ...item,
          //     className: settleDetailStatus[item.coded].className,
          //   };
          // }
          prev[item.coded] = {
            ...item,
            className: settleDetailStatus[item.coded].className,
          };
          return prev;
        }, {});
      }
    },
    // * 获取部门人员结算明细列表
    async fetchUserTableData() {
      this.isLoad = true;
      const { data } = await fetchDetailList(this.selectData);
      if (data.state === "0000") {
        const { list = [], total } = data.data || [];
        this.tableData = list;
        this.totals = total;
      }
      this.isLoad = false;
    },
    // * 获取详情 query-参数 settleState-结算状态
    async fetchDetailData(query) {
      const { data } = await fetchDetail(query);
      if (data.state === "0000" && data.data) {
        const { id, settCode, userName, modify } = data.data;
        const _type = this.setSettType[settCode];
        const formKey = {
          ...this.billingForm[_type],
          ...this.billingFormulaForm[_type],
        };
        this.isEdit = !modify ? true : false;
        this.billingInfo = formKey;
        this.billingType = _type;
        this.billingInfo.id = id;
        this.billingInfo.userName = userName;
        this.validatorObj = new Schema(this.billingFormValidator[_type]);
        this.setInfoValue(data, formKey);
      }
      this.detailLoading = false;
    },
    // * 根据详情信息赋值 settleState-结算状态
    setInfoValue(data) {
      let arrKey = [];
      const infoObj = {
        common: [
          "deptNameSeq",
          "costCenter",
          "monthly",
          "settleCost",
          "positionName",
          "rankLevelName",
          "monthlyPay",
          "taxPoints",
        ],
        other: ["positionPrice"],
      };
      // 固定比例结算： 所在部门、成本中心、结算月度、结算费用、岗位名称、岗位职级、月薪
      // 标准结算：所在部门、成本中心、结算月度、结算费用、岗位名称、岗位职级、岗位报价、月薪
      // 考勤浮动结算：所在部门、成本中心、结算月度、结算费用、岗位名称、岗位职级、岗位报价
      // 固定服务结算： 所在部门、成本中心、结算月度、结算费用、岗位名称、岗位职级、月薪
      const notCommonTypeArr = ["standard", "attendanceFloats"];
      const { data: result } = data || {};
      if (!result) {
        return;
      }
      // * 未统计状态下，输入框值不默认赋值
      if (this.settleState === 0) {
        arrKey = notCommonTypeArr.includes(this.billingType)
          ? [...infoObj.common, ...infoObj.other]
          : infoObj.common;
      } else {
        arrKey = Object.keys(this.billingInfo);
      }
      console.log(arrKey, "arrKey");
      this.setUserInfoData(arrKey, result);
    },
    // * 明细回调赋值
    setUserInfoData(keyArr, result) {
      const detailSum = this.computedCostDetailExtrasNum(
        result,
        result.settleCost
      );
      keyArr.map((i) => {
        if (i === "settleCost") {
          this.foundationCost = detailSum;
        }
        this.billingInfo[i] = result[i];
      });
    },
    // * 提交数据
    async fetchSaveInfo(query) {
      this.detailLoading = true;
      const { data } = await fetchSaveDetail(query);
      if (data.state === "0000") {
        this.$message.success(data.message);
        this.onSearch();
        this.onCloseDialog();
        this.billingInfo = {};
      }
      this.detailLoading = false;
    },
    // * 计算费用明细编辑项总计
    computedCostDetailExtrasNum(query, settleCost) {
      const {
        bonus = 0,
        supplementaryFees = 0,
        deductionItems = 0,
      } = query || {};
      const detailSum =
        settleCost -
        Number(bonus) -
        Number(supplementaryFees) +
        Number(deductionItems);
      console.log(detailSum);
      return detailSum;
    },
    // * 接口计算金额
    async fetchCompute(query) {
      this.isComputed = true;
      const { data } = await fetchFeeCalculation(query);
      this.isComputed = false;
      if (data.state === "0000") {
        const { data: rusult } = data;
        const detailSum = this.computedCostDetailExtrasNum(query, rusult);
        this.billingInfo.settleCost = rusult;
        this.foundationCost = detailSum;
      }
    },
    // * 查询
    onSearch() {
      this.selectData.pageNum = 1;
      this.fetchUserTableData();
    },
    // * 查看
    onLookDetail({ id, userName, modify, settleState, flowState }) {
      // * 满足编辑条件即结算未提交、审批已驳回、审批已撤销，其余则不满足编辑条件
      this.settleState = settleState;
      this.flowState = flowState;
      this.detailLoading = true;
      this.billingInfo.id = id;
      this.billingInfo.userName = userName;
      this.fetchDetailData({ id });
      this.visible = true;
    },
    // * 切换用户明细页条数
    handleSizeChange(val) {
      this.selectData.pageSize = val;
      this.selectData.pageNum = 1;
      this.fetchUserTableData();
    },
    // * 切换用户明细页数
    handleCurrentChange(val) {
      this.selectData.pageNum = val;
      this.fetchUserTableData();
    },
    // * 输入框失焦校验
    onValidate(key) {
      const self = this;
      let validateErrors = {};
      const rule = this.billingFormValidator[this.billingType][key];
      rule.validator(null, this.billingInfo[key], function (text) {
        if (text) {
          validateErrors[key] = [
            {
              field: key,
              message: text,
            },
          ];
          self.validateErrors = { ...self.validateErrors, ...validateErrors };
        } else {
          self.validateErrors[key] = null;
        }
      });
      console.log(self.validateErrors);
    },
    // * 计算结算费用
    onCompute(key) {
      const {
        id,
        bonus,
        supplementaryFees,
        deductionItems,
        coefficient,
        serviceCharge,
        assessmentItems,
        monthlyPay,
        taxPoints,
        addition,
      } = this.billingInfo;
      let query = {
        id,
        bonus,
        supplementaryFees,
        deductionItems,
        addition
      };

      switch (this.billingType) {
        case "attendanceFloats":
          query = { ...query, monthlyPay, assessmentItems, taxPoints };
          break;
        case "fixedRatio":
          query = { ...query, coefficient, taxPoints };
          break;
        case "fixedServices":
          query = { ...query, coefficient, serviceCharge, taxPoints };
          break;
        default:
          break;
      }
      this.commonValidator(this.fetchCompute, query);
    },
    // * 公共校验方法
    commonValidator(fn, query) {
      this.validatorObj.validate(this.billingInfo, (error, fields) => {
        if (error) {
          this.validateErrors = fields;
        } else {
          this.validateErrors = [];
          fn && fn(query);
        }
      });
    },
    // * 点击保存
    async onConfirmDialog() {
      this.commonValidator(this.fetchSaveInfo, this.billingInfo);
    },
    // * 点击取消
    onCloseDialog() {
      this.validateErrors = [];
      this.visible = false;
      this.foundationCost = "";
    },
    // * 返回
    onBack() {
      const { formQuery } = this.$route.query
      this.$router.push({
        path: "/billingrollup",
        query: { formQuery }
      });
    },
  },
  data() {
    var equationTableEle = [
      {
        type: "text",
        label: "所在部门",
        key: "deptNameSeq",
      },
      {
        type: "text",
        label: "成本中心",
        key: "costCenter",
      },
      {
        type: "text",
        label: "结算月度",
        key: "monthly",
      },
      {
        type: "cost",
        label: "结算费用(元)",
        key: "foundationCost",
        isComputed: true,
        isFormatNum: true,
      },
      {
        type: "cost",
        label: "最终结算费用(元)",
        key: "settleCost",
        isComputed: true,
        isFormatNum: true,
      },
    ];
    var constDetailFormItem = [
      {
        type: "input",
        label: "考核/奖金(元)",
        key: "bonus",
        placeholder: "示例：100.00",
      },
      {
        type: "input",
        label: "其他补费项(元)",
        key: "supplementaryFees",
        placeholder: "示例：100.00",
      },
      {
        type: "input",
        label: "其他扣费项(元)",
        key: "deductionItems",
        placeholder: "示例：0.00",
        slot: "el-input__icon el-icon-minus minus-icon",
      },
    ];
    var costDetailForm = [
      {
        type: "text",
        label: "岗位名称",
        key: "positionName",
      },
      {
        type: "text",
        label: "岗位职级",
        key: "rankLevelName",
      },
      {
        type: "cost",
        label: "月薪(元)",
        key: "monthlyPay",
      },
      ...constDetailFormItem,
    ];
    var commonRule = {
      bonus: {
        type: "string",
        validator(rule, value, callback) {
          if (
            new RegExp(/^\d{0,99}\.?\d{0,2}$/).test(value) &&
            value < 1000000
          ) {
            callback();
          } else {
            callback("限6位正整数(两位小数)");
          }
        },
      },
      supplementaryFees: {
        type: "string",
        validator(rule, value, callback) {
          if (
            new RegExp(/^\d{0,99}\.?\d{0,2}$/).test(value) &&
            value < 1000000
          ) {
            callback();
          } else {
            callback("限6位正整数(两位小数)");
          }
        },
      },
      addition: {
        type: "string",
        validator(rule, value, callback) {
          if (
            new RegExp(/^\d{0,99}\.?\d{0,2}$/).test(value) &&
            value < 1000000
          ) {
            callback();
          } else {
            callback("限6位正整数(两位小数)");
          }
        },
      },
      deductionItems: {
        type: "string",
        validator(rule, value, callback) {
          if (
            new RegExp(/^\d{0,99}\.?\d{0,2}$/).test(value) &&
            value < 1000000
          ) {
            callback();
          } else {
            callback("限6位正整数(两位小数)");
          }
        },
      },
    };
    var commonDetailForm = {
      deptNameSeq: "", // * 所在部门
      costCenter: "", // * 成本中心
      monthly: "", // * 结算月度
      settleCost: "", // * 最终结算费用
      positionName: "", // * 岗位名称
      rankLevelName: "", // * 岗位职级
      monthlyPay: "", // * 月薪
      bonus: "", // * 考核/奖金
      taxPoints: "", // 税点
      supplementaryFees: "", // * 其他补费项
      deductionItems: "", // * 其他扣费项
      flowLogList: [], // * 审批意见
    };
    return {
      settleStatus: settleStatus, // * 结算状态
      approvalStatus: {}, // * 审批状态
      toThousands: toThousands, // * 格式化金额方法
      settleState: "", // * 人员结算费用状态
      flowState: "", // * 人员审批状态
      departInfo: {
        // * 部门信息
        deptNameSeq: "",
        monthly: "",
        people: "",
      },
      selectData: {
        // * 查询条件
        settleNo: "",
        name: "",
        positionName: "",
        settleState: "",
        flowState: "",
        pageNum: 1,
        pageSize: 10,
      },
      tableHeaderItems: userRollupHeaderItems, // * table字段
      tableData: [], // * table数据
      totals: 0, // * 总条数
      isLoad: false,
      isEdit: false, // * 可编辑状态
      visible: false, // * 人员结算信息弹窗开关
      // * 校验实例化
      validatorObj: null,
      detailLoading: false, // * 人员详情动画加载
      foundationCost: "", // * 结算费用
      // * 后端结算方式名称转换
      setSettType: {
        sett_01: "standard",
        sett_02: "fixedRatio",
        sett_03: "fixedServices",
        sett_04: "attendanceFloats",
      },
      // * 结算类型对象  系数单位都是倍
      billingObj: {
        // * 标准结算
        standard: {
          equationName: "标准结算",
          equationStr: "（岗位报价 ÷ 应出勤小时数 × 实际出勤小时数）",
          equationForm: [
            {
              symbolStr: " + ",
              type: "input",
              key: "addition",
              remark: "(增项) ",
              icon: "元",
              placeholder: "示例：100.0",
            },
          ],
          equationTableEle: equationTableEle,
          costDetailForm: [
            {
              type: "text",
              label: "岗位名称",
              key: "positionName",
            },
            {
              type: "text",
              label: "岗位职级",
              key: "rankLevelName",
            },
            {
              type: "cost",
              label: "岗位报价（元）",
              key: "positionPrice",
            },
            {
              type: "cost",
              label: "月薪（元）",
              key: "monthlyPay",
            },
            {
              type: "input",
              label: "考核/奖金（元）",
              key: "bonus",
              placeholder: "示例：100.00",
            },
            {
              type: "input",
              label: "其他补费项（元）",
              key: "supplementaryFees",
              placeholder: "示例：100.00",
            },
            {
              type: "input",
              label: "其他扣费项（元）",
              key: "deductionItems",
              placeholder: "示例：0.00",
              slot: "el-input__icon minus-icon",
            },
          ],
        },
        // * 固定服务费结算
        fixedServices: {
          equationName: "固定服务结算",
          equationStr: "( (月薪 ÷ 应出勤小时数 × 实际出勤小时数)",
          equationForm: [
            {
              symbolStr: " × ",
              type: "input",
              key: "coefficient",
              remark: "(系数)",
              icon: "倍",
              placeholder: "示例：1.20",
            },
            {
              symbolStr: " + ",
              type: "input",
              key: "serviceCharge",
              icon: "元",
              remark: "(固定服务) ",
              placeholder: "示例：100.00",
            },
            {
              symbolStr: " + ",
              type: "input",
              key: "addition",
              remark: "(增项) ) × (1",
              icon: "元",
              placeholder: "示例：100.0",
            },
            {
              symbolStr: " + ",
              type: "input",
              key: "taxPoints",
              icon: "% ",
              remark: "（税点）)",
              placeholder: "示例：100.00",
            },
          ],
          equationTableEle: equationTableEle,
          costDetailForm: costDetailForm,
        },
        // * 固定比例结算
        fixedRatio: {
          equationName: "固定比例结算",
          equationStr: "( (月薪 ÷ 应出勤小时数 × 实际出勤小时数)",
          equationForm: [
            {
              symbolStr: " × ",
              type: "input",
              key: "coefficient",
              icon: "倍",
              remark: "（系数）",
              placeholder: "示例：1.20",
            },
            {
              symbolStr: " + ",
              type: "input",
              key: "addition",
              remark: "(增项) ) × （1",
              icon: "元",
              placeholder: "示例：100.0",
            },
           {
              symbolStr: " + ",
              type: "input",
              key: "taxPoints",
              icon: "% ",
              remark: "（税点）)",
              placeholder: "示例：100.00",
            },
          ],
          equationTableEle: equationTableEle,
          costDetailForm: costDetailForm,
        },
        // * 考勤浮动结算
        attendanceFloats: {
          equationName: "考勤浮动结算",
          equationStr: "(报价 ÷ 应出勤小时数 × 实际出勤小时数",
          equationForm: [
            {
              symbolStr: " + ",
              type: "input",
              key: "assessmentItems",
              icon: "元",
              remark: "（考核项）",
              placeholder: "示例：100.00",
            },
            {
              symbolStr: " + ",
              type: "input",
              key: "addition",
              remark: "(增项) ) ",
              icon: "元",
              placeholder: "示例：100.0",
            },
            {
              symbolStr: " × ",
              type: "cost",
              value: "( 1",
              icon: "%",
            },
            {
              symbolStr: " + ",
              type: "input",
              key: "taxPoints",
              icon: "% ",
              remark: "（税点）)",
              placeholder: "示例：100.00",
            },
          ],
          equationTableEle: equationTableEle,
          costDetailForm: [
            {
              type: "text",
              label: "岗位名称",
              key: "positionName",
            },
            {
              type: "text",
              label: "岗位职级",
              key: "rankLevelName",
            },
            {
              type: "cost",
              label: "报价",
              key: "monthlyPay",
            },
            ...constDetailFormItem,
          ],
        },
      },
      billingType: "fixedServices",
      billingInfo: {
        id: "",
        userName: "", // * 员工姓名
      },
      // * 公式表单
      billingFormulaForm: {
        standard: {},
        fixedServices: {
          coefficient: "",
          serviceCharge: "",
          addition: ""
        },
        fixedRatio: {
          coefficient: "",
          addition: "",
          taxPoints: "",
        },
        attendanceFloats: {
          assessmentItems: "",
          taxPoints: "",
          addition: ""
        },
      },
      // * 结算类型对象字段
      billingForm: {
        fixedRatio: commonDetailForm,
        fixedServices: commonDetailForm,
        attendanceFloats: {
          positionPrice: "",
          ...commonDetailForm,
        },
        standard: {
          positionPrice: "",
          ...commonDetailForm,
        },
      },
      // * 结算方式对应表单校验对象
      billingFormValidator: {
        standard: {
          ...commonRule,
        },
        fixedRatio: {
          coefficient: {
            type: "string",
            validator(rule, value, callback) {
              if (
                value &&
                new RegExp(/^\d{0,99}\.?\d{0,2}$/).test(value) &&
                value < 100
              ) {
                callback();
              } else {
                callback("限2位正整数(两位小数)");
              }
            },
          },
          taxPoints: {
            type: "string",
            validator(rule, value, callback) {
              if (
                value &&
                new RegExp(/^\d{0,99}$/).test(value) &&
                value <= 10000
              ) {
                callback();
              } else {
                callback("限5位且整数");
              }
            },
          },
          ...commonRule,
        },
        fixedServices: {
          coefficient: {
            type: "string",
            validator(rule, value, callback) {
              if (
                value &&
                new RegExp(/^\d{0,99}\.?\d{0,2}$/).test(value) &&
                value < 100
              ) {
                return callback();
              } else {
                return callback("限2位正整数(两位小数)");
              }
            },
          },
          serviceCharge: {
            type: "string",
            validator(rule, value, callback) {
              if (
                value &&
                new RegExp(/^\d{0,99}\.?\d{0,2}$/).test(value) &&
                value < 1000000
              ) {
                callback();
              } else {
                callback("限6位正整数(两位小数)");
              }
            },
          },
          taxPoints: {
            type: "string",
            validator(rule, value, callback) {
              if (
                value &&
                new RegExp(/^\d{0,99}$/).test(value) &&
                value <= 10000
              ) {
                callback();
              } else {
                callback("限5位且整数");
              }
            },
          },
          ...commonRule,
        },
        attendanceFloats: {
          assessmentItems: {
            type: "string",
            validator(rule, value, callback) {
              if (
                value &&
                new RegExp(/^\d{0,99}\.?\d{0,2}$/).test(value) &&
                value < 1000000
              ) {
                callback();
              } else {
                callback("限6位正整数(两位小数)");
              }
            },
          },
          taxPoints: {
            type: "string",
            validator(rule, value, callback) {
              if (
                value &&
                new RegExp(/^\d{0,99}$/).test(value) &&
                value <= 10000
              ) {
                callback();
              } else {
                callback("限5位且整数");
              }
            },
          },
          ...commonRule,
        },
      },
      // * 校验失败对象
      validateErrors: {},
      isComputed: false, // 计算结算费用加载动画
      // * 审批详情table字段
      commentTableHeaderItems: userRollupDetailApprovalItem,
    };
  },
  components: {
    HPCommonPage,
    HPTable,
    HPDialog,
  },
};
</script>

<template>
  <div class="rollup-detail-container">
    <HPCommonPage :titleText="'成本管理 / 结算汇总 / 人员结算明细'">
      <template v-slot:header>
        <el-button type="primary" size="small" class="back-btn" @click="onBack">返回</el-button>
      </template>
      <template>
        <ul class="el-row--flex depart-box">
          <li>
            <span class="depart-label">一级部门名称：</span
            >{{ departInfo.deptNameSeq }}
          </li>
          <li>
            <span class="depart-label">外包人数：</span
            >{{ departInfo.people }}人
          </li>
          <li>
            <span class="depart-label">结算月度：</span>{{ departInfo.monthly }}
          </li>
        </ul>
      </template>
      <template v-slot:searchForm>
        <el-form
          :inline="true"
          :model="selectData"
          class="form-box res-form-box"
        >
          <el-form-item label="员工姓名：">
            <el-input
              v-model="selectData.name"
              clearable
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="岗位名称：">
            <el-input
              v-model="selectData.positionName"
              clearable
              placeholder="请输入岗位名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="结算费用：">
            <el-select
              v-model="selectData.settleState"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in settleStatus"
                :key="item.key"
                :label="item.detailLable"
                :value="item.key"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审批状态：">
            <el-select
              v-model="selectData.flowState"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in approvalStatus"
                :key="item.coded"
                :label="item.lable"
                :value="item.coded"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <template v-slot:searchFormbtn>
        <el-button type="success" size="small" @click="onSearch"
          >查询</el-button
        >
      </template>
      <template v-slot:table>
        <HPTable
          :className="'expand-table-box'"
          :tableHeaderItems="tableHeaderItems"
          :tableData="tableData"
          :loading="isLoad"
        >
          <template v-slot:approval="{ data }">
            <span
              :class="
                approvalStatus[data.row.flowState]
                  ? approvalStatus[data.row.flowState].className
                  : ''
              "
            >
              <span class="circle"></span>
              {{
                approvalStatus[data.row.flowState]
                  ? approvalStatus[data.row.flowState].lable
                  : "--"
              }}
            </span>
          </template>
        </HPTable>
      </template>
      <template v-slot:pagination>
        <el-pagination
          v-if="totals"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="selectData.pageNum"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="selectData.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="totals"
        >
        </el-pagination>
      </template>
    </HPCommonPage>
    <HPDialog
      class="rollup-dialog"
      :confirmBtnText="'保存'"
      :title="`${departInfo.monthly} ${billingInfo.userName}`"
      :visible.sync="visible"
      :footer="isEdit"
      :confirmDisabled="detailLoading"
      :footerClassName="'text-center'"
      :before-close="onCloseDialog"
      @close-dialog="onCloseDialog"
      @confirm-dialog="onConfirmDialog"
    >
      <template v-slot:body>
        <div v-loading="detailLoading" element-loading-text="数据加载中">
          <div class="billing-user-rollup-item">
            <table
              cellspacing="0"
              cellpadding="0"
              border="0"
              class="el-table el-table--border"
            >
              <tbody>
                <tr>
                  <td class="el-table__cell first-row" colspan="5">
                    <div class="el-row--flex billing-equation-box">
                      <span
                        >结算方式：{{ billingObj[billingType].equationName }} =
                        {{ billingObj[billingType].equationStr }}</span
                      >
                      <div
                        v-for="(item, idx) in billingObj[billingType]
                          .equationForm"
                        :key="idx"
                        class="el-row--flex inline-block-box"
                        :class="[
                          validateErrors[item.key]
                            ? 'el-form-item is-error'
                            : '',
                        ]"
                      >
                        <span class="symbol-icon">{{ item.symbolStr }}</span>
                        <template v-if="isEdit && item.type === 'input'">
                          <i
                            class="el-form-item__error"
                            v-if="validateErrors[item.key]"
                            >{{
                              validateErrors[item.key]
                                ? validateErrors[item.key][0].message
                                : ""
                            }}</i
                          >
                          <el-input
                            size="mini"
                            :class="[
                              validateErrors[item.key] ? 'error-input' : '',
                            ]"
                            :placeholder="item.placeholder"
                            v-model="billingInfo[item.key]"
                            @blur="onValidate(item.key)"
                          >
                            <el-button slot="append">{{ item.icon }}</el-button>
                          </el-input>
                        </template>
                        <template v-else>
                          <span v-if="item.icon === '%'">
                            {{ item.value || billingInfo[item.key] }}
                          </span>
                          <span v-else>
                            {{ toThousands(billingInfo[item.key]) }}
                          </span>
                        </template>
                        <div v-if="item.remark">
                          <template v-if="!isEdit">{{ item.icon }}</template
                          >{{ item.remark }}
                        </div>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr v-for="idx in 2" :key="idx">
                  <td
                    v-for="item in billingObj[billingType].equationTableEle"
                    :key="item.key"
                    class="el-table__cell"
                  >
                    <template v-if="idx === 1">
                      {{ item.label }}
                      <template v-if="item.isComputed && isEdit">
                        <el-button
                          size="small"
                          class="submit-btn"
                          @click="onCompute(item.key)"
                          >计算</el-button
                        >
                      </template>
                    </template>
                    <template v-else>
                      <span v-if="item.type === 'text'">
                        {{ billingInfo[item.key] }}
                      </span>
                      <template v-else>
                        <template v-if="item.isComputed && isComputed">
                          <i class="el-icon-loading"></i>
                        </template>
                        <span>{{
                          isComputed && item.isComputed
                            ? ""
                            : toThousands(
                                item.key === "foundationCost"
                                  ? foundationCost
                                  : billingInfo[item.key]
                              )
                        }}</span>
                      </template>
                    </template>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="billing-user-rollup-item">
            <p class="item-title">费用明细</p>
            <table
              cellspacing="0"
              cellpadding="0"
              border="0"
              class="el-table el-table--border"
            >
              <tbody>
                <tr>
                  <td
                    v-for="item in billingObj[billingType].costDetailForm"
                    :key="item.la"
                    class="el-table__cell"
                  >
                    <span class="valida-icon" v-if="item.isValidate">*</span
                    >{{ item.label }}
                  </td>
                </tr>
                <tr>
                  <td
                    v-for="item in billingObj[billingType].costDetailForm"
                    :key="item.la"
                    :class="[
                      'el-table__cell first-row',
                      item.type === 'input' ? 'cost-input' : '',
                      validateErrors[item.key] ? 'el-form-item is-error' : '',
                    ]"
                  >
                    <template v-if="item.type === 'text'">
                      {{ billingInfo[item.key] }}
                    </template>
                    <template v-else-if="item.type === 'input' && isEdit">
                      <i
                        class="el-form-item__error"
                        v-if="validateErrors[item.key]"
                        >{{
                          validateErrors[item.key]
                            ? validateErrors[item.key][0].message
                            : ""
                        }}</i
                      >
                      <el-input
                        v-model="billingInfo[item.key]"
                        :class="[validateErrors[item.key] ? 'error-input' : '']"
                        :placeholder="item.placeholder"
                        @blur="onValidate(item.key)"
                      >
                        <i
                          slot="prefix"
                          :class="item.slot"
                          v-if="item.slot"
                        ></i>
                      </el-input>
                    </template>
                    <template v-else>
                      {{ item.key === "deductionItems" ? `- ` : ""
                      }}{{ toThousands(billingInfo[item.key]) }}
                    </template>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <!--- 已统计且非待审批状态下，展示审批意见 -->
          <div class="billing-user-rollup-item" v-if="flowState">
            <p class="item-title">驳回意见</p>
            <HPTable
              :tableHeaderItems="commentTableHeaderItems"
              :tableData="billingInfo.flowLogList || []"
              :loading="false"
              :height="'140px'"
            >
              <template v-slot:comment="{ data }">
                <span v-html="data.row.comment"></span>
              </template>
            </HPTable>
          </div>
        </div>
      </template>
    </HPDialog>
  </div>
</template>

<style lang="scss">
.rollup-detail-container {
  height: 100%;
  overflow: hidden;
  .common-search-form-right {
    position: relative;
  }
  .back-btn {
    position: absolute;
    top: -40px;
    left: 10px;
  }
  .depart-box {
    padding-bottom: 20px;
  }
  .depart-box li {
    font-size: 14px;
    color: #00a1d6;
    &:not(:last-child) {
      margin-right: 28px;
    }
    .depart-label {
      font-size: 13px;
      color: #212121;
    }
  }
  .el-table .el-table__cell.first-row {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}
.rollup-dialog .el-dialog {
  width: 1400px;
}
// 小屏优化
@media screen and (max-width: 1500px) {
  .rollup-dialog .el-dialog {
    width: 1300px;
  }
}
// 小屏优化
@media screen and (max-width: 1300px) {
  .rollup-dialog .el-dialog {
    width: 1180px;
  }
}
.billing-user-rollup-item {
  text-align: left;
  margin-bottom: 24px;
  .el-table__cell {
    text-align: center !important;
  }
  .item-title {
    font-weight: bold;
  }
  .item-title:not(h3) {
    font-size: 14px;
    padding-bottom: 10px;
  }
  h3.item-title {
    padding-bottom: 24px;
  }
  .billing-equation-box,
  .inline-block-box {
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
    .symbol-icon {
      padding: 0 3px;
    }
  }
  .billing-equation-box {
    flex-wrap: wrap;
    color: #00a1d6;
    >span {
      padding-bottom: 10px;
    }
  }
  .inline-block-box {
    & > div {
      white-space: nowrap;
    }
    .el-form-item__error {
      left: 18px;
    }
    .el-input {
      width: 140px;
    }
  }
  .inline-block-box,
  .cost-input {
    position: relative;
    margin-bottom: 0 !important;
    .el-form-item__error {
      font-style: normal;
    }
  }
  .cost-input .el-form-item__error {
    top: 60px;
    left: 11px;
  }

  .valida-icon {
    color: #f56c6c;
    margin-right: 4px;
  }
  .cost-input.el-table__cell {
    width: 160px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .minus-icon::before {
    content: "-";
    color: #000000;
  }
  .remark-scroll-box {
    padding: 8px;
    width: calc(100% - 16px);
    height: 100px;
    overflow-y: auto;
    border: 1px solid #ebeef5;
  }
}
</style>
